<template>
	<view style="overflow: hidden;">
		<view class="top">
			<text>联盟商家</text>
		</view>
		<view class="bg"></view>
		<view class="info">
			<view class="displayarea">
				<text class="merchantName">咪购生活Migou</text>
				<text class="type">仅可到店消费</text>
				<view class="scoreBox">
					<view class="scoreBG"></view>
					<view class="score" :style="'width:'+((4.5 / 5) * 87)+'px'"></view>
					<text>4.5</text>
				</view>
				<view class="rebateBox">
					<view class="rebateItem">
						<text class="rebateItem_title">积</text>
						<text class="rebateItem_content">3%</text>
					</view>
					<view class="rebateItem">
						<text class="rebateItem_title">积</text>
						<text class="rebateItem_content">5%</text>
					</view>
					<view class="rebateItem">
						<text class="rebateItem_title">积</text>
						<text class="rebateItem_content">20%</text>
					</view>
				</view>
				<scroll-view class="imgBox" scroll-x="true" show-scrollbar="false">
					<image 
						v-for="(item,index) in images" 
						:key="index"
						:src="item"
						@click="previewImage(index)"
					></image>
				</scroll-view>
			</view>
			<view class="business_information">
				<view class="business_information_left">
					<view class="business_information_time">
						<image src="../../../static/images/shq_time.png"></image>
						<text class="state">营业中</text>
						<text class="time">09:00-23:00</text>
					</view>
					<text class="location">浙江省温州市瑞安市安阳新区塘河北路333号</text>
				</view>
				<view class="business_information_right">
					<image src="../../../static/images/shq_tel.png"></image>
				</view>
			</view>
			<view class="certification">
				<image class="certification_icon" src="../../../static/images/shq_zz.png"></image>
				<text>查看商家资质</text>
				<image class="certification_right" src="../../../static/images/shq_right.png"></image>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom_content">
				<view class="bottom_content_item">
					<image src="../../../static/images/shq_dk.png"></image>
					<text>去打卡</text>
				</view>
				<view class="bottom_content_item">
					<image src="../../../static/images/shq_fx.png"></image>
					<text>分享好店</text>
				</view>
				<view class="bottom_content_item" @click="writeacomment">
					<image src="../../../static/images/shq_pj.png"></image>
					<text>写评价</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		mounted() {
			
		},
		methods:{
			previewImage(index) {
				uni.previewImage({
					count: 6,
					indicator:'number',
					current: index, // 当前显示图片索引
					urls: this.images // 需要预览的图片http链接列表
				});
			},
			writeacomment()
			{
				uni.navigateTo({
					url:'/pages/other/shenghuoquan/writeacomment'
				})
			}
		},
		data() {
			return{
				images:[
					'../../../static/images/topic_bg.jpg',
					'../../../static/images/topic_bg.jpg'
				]
			}
		}
	}
</script>

<style>
.top{width: 100%; height: 50px; background-color: #50d47e; position: fixed; top: 0px;}
.top text{width: 100%; position: absolute; z-index: 1; text-align: center; font-size: 18px; color: #fff; line-height: 50px;}
	
.bg{width: 100%; height: 80px; margin-top: 50px; background:linear-gradient(to bottom, #50d47e, rgba(80,212,216,0));;}
.info{width: 90%; height: auto; background-color: #fff; float: left; margin-left: 5%; margin-top: -70px; border-radius: 15px; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05); }

.displayarea{width: 90%; height: auto; padding: 23px 0px 15px 0px; float: left; margin-left: 5%;}
.merchantName{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 100px); height: 25px; float: left; line-height: 25px; font-size: 18px; font-weight: bold; color:#434343;}
.type{width: 95px; height: 23px; color:#ef4460; border-radius: 3px; border:1px solid #ef4460; line-height: 21px;  background-color: rgba(239,68,96,0.1); float: right; text-align: center; font-size: 13px;}
.scoreBox{width: 100%; height: 20px; float: left; margin-top: 8px; margin-bottom: 5px;}
.scoreBG{width: 87px; height: 15px; float: left; position: relative; z-index: 1; margin-top: 2px; background: url(../../../static/images/shq_score_w.png); background-size: 87px 15px; background-repeat: no-repeat;}
.score{width: 0px; height: 15px; float: left; position: absolute; z-index: 2; margin-top: 2px; overflow: hidden; background: url(../../../static/images/shq_score.png); background-size: 87px 15px; background-repeat: no-repeat;}
.scoreBox text{float: left; font-size: 16px; height: 15px; line-height: 15px; margin-top: 2px; margin-left: 10px; font-weight: bolder; color: #e93a41;}
.rebateBox{width: 100%; height: 20px; float: left; margin-top: 6px;}
.rebateItem{width: auto; float: left; margin-right: 8px; background-color: rgba(87, 194, 125,0.1); height: 20px; border:1px solid #57c27d; border-radius: 5px; }
.rebateItem_title{width: 20px; height: 18px; line-height: 18px; text-align: center; float: left; overflow: hidden; font-size: 13px; color: #FFF; background-color: #57c27d; border-top-right-radius: 6px;}
.rebateItem_content{width: auto; height: 18px; float: left; padding: 0px 8px; line-height: 20px; font-size: 13px; color: #57c27d;}
.imgBox{width: 100%; height: 75px; float: left; white-space: nowrap; margin-top: 15px;}
.imgBox image{width: 100px; height: 75px; margin-right: 8px; border-radius: 8px;}
.imgBox::-webkit-scrollbar{ display: none; } 


.business_information{width: 90%; height: auto; float: left; margin-left: 5%; padding: 15px 0px; display: flex;  align-items: center; border-top:1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9;}
.business_information_left{width: calc(100% - 50px); height: auto; min-height: 50px; float: left;}
.business_information_right{width: 50px; height: 100%; min-height: 50px; float: right; display: flex; justify-content: center; align-items: center;}
.business_information_right image{width: 26px; height: 26px;}
.business_information_time{width: 100%; float: left; height: 20px; margin-top: 3px;}
.business_information_time image{width: 18px; height: 18px; float: left; margin-top: 1px;}
.state{width: auto; height: 20px; line-height: 20px; font-size: 14px; margin-left: 6px; color: #50d47e; float: left; }
.time{width: auto; height: 20px; line-height: 20px; font-size: 14px; margin-left: 6px; color: #9b9b9b; float: left; }
.location{width: 100%; height: auto; line-height: 20px; margin-top: 7px; float: left; font-size: 13px; font-weight: bold; color: 333;}

.certification{width: 90%; height: 58px; padding: 18px 0px; float: left; margin-left: 5%;}
.certification_icon{width: 16px; height: 16px; float: left; margin-top: 2px;}
.certification text{font-size: 14px; height: 16px; line-height: 16px; color: #616161; float: left; margin-top: 1px; margin-left: 6px;}
.certification_right{width: 14px; height: 14px; float: right; margin-top: 3px;}

.bottom{width: 100%; height: 100px; background-color: #fff; position: fixed; bottom: 0px; box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.1);}
.bottom_content{width: 95%; height: 30px; float: left; margin-left: 2.5%; margin-top:20px;}
.bottom_content_item{width: 33.3%; float: left; display: flex; justify-content: center;}
.bottom_content_item:nth-child(1) image{width: 24px; height: 24px; margin-top: 3px; margin-right: 3px;}
.bottom_content_item:nth-child(2) image{width: 20px; height: 20px; margin-top: 5px; margin-right: 5px;}
.bottom_content_item:nth-child(3) image{width: 22px; height: 22px; margin-top: 5px; margin-right: 6px;}

.bottom_content_item text{height: 20px; line-height: 20px; margin-top: 5px; font-size: 17px; font-weight: 400; color: #848484;}
</style>